<template>
  <a-layout class="app-layout">
    <a-layout-content class="auth-content">
      <a-card class="auth-card">
        <a-row :gutter="32">
          <a-col span="12" class="auth-card-left">
            <div class="auth-card-title">
              万维广告<span class="margin-left-sm">LERP</span>
            </div>
            <div class="auth-card-description">广告行业任务、订单、项目、产品、财务与客户管理软件</div>
            <img class="auth-bg-svg" src="@/assets/image/dashboard.svg" alt="dashboard Image">
          </a-col>
          <a-col span="12">
            <router-view/>
          </a-col>
        </a-row>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>
<script setup lang="ts">
</script>

<style scoped>
  .auth-card {
    width: 960px;
  }
  .auth-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .auth-bg-svg {
    width: 400px;
    height: 235px;
  }
  .auth-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
    border-right: 1px solid var(--border-color);
  }
  .auth-card-title {
    font-size: 28px;
    margin-bottom: var(--space-sm);
    font-weight: 600;
    background: linear-gradient(to right, #1677ff, #531dab);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .auth-card-description {
    font-size: 14px;
    margin-bottom: 32px;
    color:  rgba(0,0,0,0.55);
  }
</style>